<div class="container-fluid">
  <div class="row horizontally-padded">
    <div id='front'><h2>Welcome to GRR</h2></div>
    Query for a system to view in the search box above.

    <p>
      Type a search term to search for a machine using either a hostname,
      mac address or username.
    </p>
    <br/>

    <div name="RecentlyAccessedClients" class="panel panel-default">
      <div class="panel-heading">
        <h4>Recently Accessed <strong>Clients</strong></h4>
      </div>
      <div class="panel-body">

        <span ng-if="controller.clientApprovals === undefined">
          Loading...
        </span>

        <span ng-if="controller.clientApprovals.length == 0">
          None.
        </span>

        <table ng-if="controller.clientApprovals.length > 0"
               class="table table-condensed table-hover table-bordered full-width">
          <colgroup>
            <col style="width: 40px">
            <col style="width: 40px">
            <col style="width: 13em">
            <col style="width: 13em">
            <col style="width: 20%">
            <col style="width: 20%">
            <col style="width: 20%">
            <col style="width: 20%">
          </colgroup>
          <thead>
            <tr>
              <th>Online</th>
              <th>Subject</th>
              <th>Host</th>
              <th>Labels</th>
              <th>Last Checkin</th>
              <th>Reason</th>
            </tr>
          </thead>
          <tr ng-repeat="approval in ::controller.clientApprovals"
              ng-class="::{'half-transparent': !approval.value.is_valid.value}"
              ng-click="controller.onClientClicked(approval.value.subject.value.client_id.value)">
            <!-- Online status -->
            <td>
              <grr-client-status-icons client="::approval.value.subject" />
            </td>

            <!-- Client Id -->
            <td>
              <span type="subject">
                {$ ::approval.value.subject.value.client_id.value $}
              </span>
            </td>

            <!-- Client Host -->
            <td class="host">
              <grr-semantic-value
                 value="::approval.value.subject.value.os_info.value.fqdn" />
            </td>

            <!-- Client Labels -->
            <td>
              <grr-semantic-value
                 value="::approval.value.subject.value.labels" />
            </td>

            <!-- Client Latest checkin -->
            <td>
              <grr-semantic-value
                 value="::approval.value.subject.value.last_clock" />
            </td>

            <!-- Reason -->
            <td class="reason">
              <grr-semantic-value
                 value="::approval.value.reason" />
            </td>

          </tr>

        </table>
        <p class="small text-right">
          <em>* semi-transparent rows designate expired approvals</em>
        </p>
      </div>
    </div>


    <div name="RecentlyCreatedHunts"  class="panel panel-default">
      <div class="panel-heading">
        <h4>Recently Created <strong>Hunts</strong></h4>
      </div>
      <div class="panel-body">

        <span ng-if="controller.hunts === undefined">
          Loading...
        </span>

        <span ng-if="controller.hunts.length == 0">
          None.
        </span>

        <table ng-if="controller.hunts.length > 0"
               class="table table-condensed table-hover table-bordered full-width">
          <colgroup>
            <col style="width: 40px" />
            <col />
            <col />
            <col style="width: 16em" />
            <col style="width: 16em" />
            <col />
            <col width="100%" />
          </colgroup>
          <thead>
            <tr>
              <th>Status</th>
              <th>Hunt ID</th>
              <th>Name</th>
              <th>Start Time</th>
              <th>Expires</th>
              <th>Client Limit</th>
              <th>Description</th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="hunt in ::controller.hunts"
                ng-click="controller.onHuntClicked(hunt)">
              <td><grr-hunt-status-icon hunt="::hunt" /></td>
              <td>{$ ::hunt.value.hunt_id.value $}</td>
              <td>{$ ::hunt.value.name.value $}</td>
              <td><grr-timestamp value="::hunt.value.created" /></td>
              <td><grr-timestamp value="::hunt.value.expires" /></td>
              <td>{$ ::hunt.value.client_limit.value $}</td>
              <td>{$ ::hunt.value.description.value $}</td>
            </tr>
          </tbody>
        </table>

      </div>
    </div>

  </div>  <!-- row -->
</div>  <!-- container -->
